<template>
  <div>
    <div style="display: flex; margin-left: 20px;margin-top: 10px">
      <div class="block">
        <el-date-picker
          v-model="value1"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          @change="handleDateChange">
        </el-date-picker>
      </div>
      <div style="margin-top: 5px;margin-left: 10px">
        <span>销售额</span>
        <el-switch
          v-model="showType"
          active-color="#13ce66"
          inactive-color="#ff4949"
          @change="handleSwitchChange">
        </el-switch>
        <span>销量</span>
      </div>

    </div>
    <div style="display: flex">
      <div>
        <div ref="main1" style="width: 500px;height:400px;margin: 60px auto;"></div>
        <div ref="main2" style="width: 500px;height:400px;margin: 60px auto;"></div>
      </div>
      <div>
        <div ref="main3" style="width: 500px;height:400px;margin: 60px auto;"></div>
        <div ref="main4" style="width: 500px;height:400px;margin: 60px auto;"></div>
      </div>
    </div>
  </div>

</template>

<script>

export default {
  name: 'Dashboard',
  data () {
    return {
      value1: '',
      category: [],
      package: [],
      showType: true
    }
  },
  created () {
  },
  mounted () {
    this.fetchCategoryData()
    this.fetchPackageData()

    // setTimeout(() => {
    //   this.$api.modules['oms-chart'].CHART().then((res) => {
    //     console.log(res)
    //   })
    //
    //   this.formOptions.saveLoading = false
    // }, 100)
  },
  methods: {
    async initEcharts1 () {
      this.$echarts.init(this.$refs.main1).dispose()
      const myChart = this.$echarts.init(this.$refs.main1)
      const detail = []
      for (const name of this.category) {
        const data = {
          start_time: this.value1[0],
          end_time: this.value1[1],
          type: 0,
          name: name
        }
        await this.$api.modules['oms-chart'].CHART(data).then((res) => {
          detail.push({ value: this.showType ? res.count : res.total, name: name })
        })
      }
      const option = {
        title: {
          text: '菜品销售分析',
          subtext: '按菜品类别',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            type: 'pie',
            radius: '50%',
            data: detail,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      option && myChart.setOption(option)
    },
    async initEcharts2 () {
      this.$echarts.init(this.$refs.main2).dispose()
      const myChart = this.$echarts.init(this.$refs.main2)
      const detail = []
      for (const name of this.package) {
        const data = {
          start_time: this.value1[0],
          end_time: this.value1[1],
          type: 1,
          name: name
        }
        await this.$api.modules['oms-chart'].CHART(data).then((res) => {
          detail.push({ value: this.showType ? res.count : res.total, name: name })
        })
      }
      const option = {
        title: {
          text: '套餐销售分析',
          subtext: '按套餐',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            type: 'pie',
            radius: '50%',
            data: detail,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      option && myChart.setOption(option)
    },
    async initEcharts3 () {
      this.$echarts.init(this.$refs.main3).dispose()
      const myChart = this.$echarts.init(this.$refs.main3)
      const detail = []
      for (const name of this.category) {
        const data = {
          start_time: this.value1[0],
          end_time: this.value1[1],
          type: 0,
          name: name
        }
        await this.$api.modules['oms-chart'].CHART(data).then((res) => {
          // console.log(res)
          detail.push(this.showType ? res.count : res.total)
        })
      }
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: this.category,
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            type: 'bar',
            barWidth: '60%',
            data: detail
          }
        ]
      }
      option && myChart.setOption(option)
    },
    async initEcharts4 () {
      this.$echarts.init(this.$refs.main4).dispose()
      const myChart = this.$echarts.init(this.$refs.main4)
      const detail = []
      for (const name of this.package) {
        const data = {
          start_time: this.value1[0],
          end_time: this.value1[1],
          type: 1,
          name: name
        }
        await this.$api.modules['oms-chart'].CHART(data).then((res) => {
          // console.log(res)
          detail.push(this.showType ? res.count : res.total)
        })
      }
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: this.package,
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            type: 'bar',
            barWidth: '60%',
            data: detail
          }
        ]
      }
      option && myChart.setOption(option)
    },
    fetchCategoryData () {
      this.$api.modules['pms-category'].LIST().then(res => {
        this.category = []
        res.data.forEach(item => {
          this.category.push(item.name)
        })
        this.initEcharts1()
        this.initEcharts3()
      }).catch(err => {
        console.log('err', err)
      })
    },
    fetchPackageData () {
      this.$api.modules['pms-package'].LIST().then(res => {
        this.package = []
        res.data.forEach(item => {
          this.package.push(item.name)
        })
        this.initEcharts2()
        this.initEcharts4()
      }).catch(err => {
        console.log('err', err)
      })
    },
    handleSwitchChange () {
      // this.showType = !this.showType
      this.initEcharts1()
      this.initEcharts2()
      this.initEcharts3()
      this.initEcharts4()
    },
    handleDateChange () {
      // console.log(this.value1)
      this.initEcharts1()
      this.initEcharts2()
      this.initEcharts3()
      this.initEcharts4()
    }
  }
}
</script>
